<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${path}/css/themes/base/jquery.ui.all.css">
<script src="${path}/js/jquery-1.7.2.js"></script>
<script src="${path}/js/jquery.ui.core.js"></script>
<script src="${path}/js/jquery.ui.widget.js"></script>
<script src="${path}/js/jquery.ui.button.js"></script>
<link rel="stylesheet" href="${path}/css/demos.css">
<link rel="stylesheet" href="${path}/css/icons.css">
<script src="${path}/js/icons.js"></script>
<link rel="stylesheet" type="text/css" href="${path}/css/index.css"/>
<link rel="stylesheet" type="text/css" href="${path}/css/public.css"/>
<html>
<head>
    <title>角色列表</title>
    <style type="text/css">
        .mytable {
            margin-top: 20px;
        }

        .mytable td {
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //全选功能
            $("#allcheck").click(function () {
                $(".myCheckBox").each(function () {
                    this.checked = true;
                });
            });
            //确定按钮事件处理
            $("#btnConfirm").click(function () {
                var parentRef = dialogArguments;
                //根据checkbox选项读取值
                var ids = "";
                var names = "";
                $(".myCheckBox").each(function () {
                    if (this.checked) {
                        //写入父页面文本框中
                        //alert(this.id+","+this.name);
                        ids += this.id + ",";
                        names += this.name + ",";
                    }
                });
                //alert(names);
                parentRef.getElementById("roleListDisplay").value = names;
                parentRef.getElementById("roleListHidden").value = ids;
                window.close();
            });
        });
    </script>
</head>
<body>
<div class="pageBody">
    <table class="mytable">
        <tr>
            <th style="width: 30px"></th>
            <th style="width: 70px">角色</th>
            <th style="width: 280px">描述</th>
        </tr>

        <c:forEach items="${roles}" var="role" >
            <tr>
                <td>
                    <input id="${role.id}" name="${role.name}" class="myCheckBox" type="checkbox">
                </td>
                <td>${role.name}</td>
                <td>${role.remark}</td>
            </tr>
        </c:forEach>


    </table>
    <div class="buttonBar">
        <button id="allcheck">全选</button>
        <button id="btnConfirm">确定</button>
    </div>
</div>
</body>
</html>

